<template>
  <view class="bg-white">
    <view class="text-center">
      <view class="p2">
        <view>我的余额  <uni-icons type="gear" @click="show = true" /></view>
      </view>
      <view class="flex items-center justify-center p4 text-18px">
        <view>￥</view>
        <view class="text-48px font-bold">{{ userInfo.money }}</view>
      </view>
    </view>
    <view class="grid grid-cols-3 m-b-1px gap-1 bg-white p1 text-gray-5">
      <view class="text-center">
        <view class="m2 text-12px text-gray">今日收益</view>
        <view class="font-bold">12.34</view>
      </view>
      <view class="text-center">
        <view class="m2 text-12px text-gray">最近收益</view>
        <view class="font-bold">23.23</view>
      </view>
      <view class="text-center">
        <view class="m2 text-12px text-gray">总收益</view>
        <view class="font-bold">{{ userInfo.income }}</view>
      </view>
    </view>
    <view class="flex justify-center p4">
      <view class="w-50%">
        <u-button type="primary" :color="buttonColor" size="small" @click="withdrawal()">{{ buttonText }}</u-button>
      </view>
    </view>

    <u-popup
      :show="show" mode="center" class="w-80%" closeable round="8" :safe-area-inset-bottom="false"
      @close="show = false"
    >
      <view class="w-300px p5">
        <view class="p3 text-center text-16px font-bold">收款配置</view>
        <u-form label-position="top" label-width="auto">
          <u-form-item label="支付宝" required>
            <u-input v-model="form.alipay" border="none" placeholder="请输入支付宝账号" />
          </u-form-item>
          <u-form-item label="微信号" required>
            <u-input v-model="form.wx_number" border="none" placeholder="请输入微信号" />
            <view class="py1 text-12px text-gray">微信用于必要时候联系您</view>
          </u-form-item>
        </u-form>
        <u-button :color="buttonColor" size="small" @click="submit">提交</u-button>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { updateUserFund, withdrawal } from '~/api/user'
import { useUserStore } from '~/stores/user'
import bus from '~/uni_modules/dk-diy-page/utils/bus'

export default {
  name: 'DkAppFundContent',
  props: {
    buttonText: {
      type: String,
      default: '提现',
    },
    buttonAmount: {
      type: Number,
      default: 1,
    },
    buttonColor: {
      type: String,
      default: '#FE2C55',
    },
  },
  data() {
    return {
      show: false,
      form: {
        alipay: '',
        wx_qrcode: '',
        wx_number: '',
      },
    }
  },
  mounted() {
    this.form.alipay = this.userInfo.alipay
    this.form.wx_qrcode = this.userInfo.wx_qrcode
    this.form.wx_number = this.userInfo.wx_number
  },
  methods: {
    // 提现
    withdrawal() {
      if (!this.userInfo.alipay || !this.userInfo.wx_number) {
        this.show = true
        return
      }

      if (this.userInfo.money < this.buttonAmount) {
        uni.showToast({
          title: `当前提现最低金额为${this.buttonAmount}元`,
          icon: 'none',
        })
        return
      }
      // 提现接口
      withdrawal().then((res) => {
        if (res.code === 0) {
          uni.showModal({
            title: '提示',
            content: res.msg,
            showCancel: false,
          })
          useUserStore().getUser()
          bus.emit('refreshFund')
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
          })
        }
      }).catch((res) => {
        uni.showToast({
          title: res.msg,
          icon: 'none',
        })
      })
    },
    submit() {
      if (!this.form.alipay) {
        uni.showToast({
          title: '请输入支付宝账号',
          icon: 'none',
        })
        return
      }
      console.log(this.form)
      updateUserFund(this.form).then((res) => {
        uni.showToast({
          title: res.msg,
          icon: 'success',
        })
        this.show = false
        useUserStore().getUser()
      })
    },
  },
}
</script>

<style scoped></style>
